<template>
  <qx-table :option="formOption" :remoteData="remoteData">
    <template v-slot:dictKey="{ row }">
      <QLink @click="handleUpdate(row)">{{ row.dictKey }}</QLink>
    </template>
  </qx-table>
  <q-modal v-model="modalVisible" :header="formInfo.id ? $t('Edit') : $t('Add')" :width="500" btnAlign="center"
           position="right" @beforeClose="beforeClose" @confirm="submitForm">
    <qx-form ref="DictDataCfg" v-model="formInfo" :option="formOption"></qx-form>
  </q-modal>
</template>

<script setup>
import { postAPI, putAPI } from 'src/api/index.js'
import { i18n, toI18nName } from 'boot/i18n.js'
import { setDictData } from 'src/enum/ajaxRemoteData.js'
import { deepClone } from 'src/utils/utils.js'
import { computed, onMounted, ref } from 'vue'

const props = defineProps({ value: String })

const dictTypeCode = 'AGV_CFG'
const formInfo = ref({})
const searchForm = ref({})
const DictDataCfg = ref(null)
const modalVisible = ref(false)
const remoteData = ref({ dicUrl: '/config/api/cfgDictData/list' })

const formOption = computed(() => {
  return {
    labelWidth: 100, searchLabelWidth: 70, menuBtn: false, span: 22,
    column: [{
      label: `${i18n.t('AppCore.ParamCode')}`, field: 'dictKey', required: true, readonly: !!formInfo.value.id,
      minWidth: 80, slot: true
    }, {
      label: `${i18n.t('AppCore.ParamNameENUS')}`, field: 'dictNameEnUs', hide: true, minWidth: 80
    }, {
      label: `${i18n.t('AppCore.ParamName')}`, field: 'dictNameZhCn', required: true,
      format: (_, row) => row[toI18nName('dictNameZhCn')], minWidth: 80
    }, {
      label: `${i18n.t('AppCore.ParamValue')}`, field: 'dictValue', required: true, minWidth: 80
    }, {
      label: `${i18n.t('Sorting')}`, field: 'sortId', type: 'number', min: 0, decimals: 0, hide: true,
      required: true, minWidth: 60
    }, {
      label: `${i18n.t('CreationTime')}`, field: 'createdTime', display: false, minWidth: 80
    }, {
      label: `${i18n.t('Remarks')}`, field: 'remark', type: 'textarea', search: false, minWidth: 120,
      maxlength: 200
    }]
  }
})

const handleUpdate = row => {
  formInfo.value = deepClone(row)
  modalVisible.value = true
}
const formatSearchForm = () => {
  const params = { ...searchForm.value }
  params.andDynamicQueryItems = [{ criterion: 'andEqualTo', property: 'dictTypeCode', value: dictTypeCode }]
  if (props.value) {
    params.andDynamicQueryItems = [{ criterion: 'andEqualTo', property: 'dictKey', value: props.value }]
  }
  params.orderByItems = [{ orderType: 'ASC', property: 'sortId' }]
  return params
}
const startSearch = (_, done, clearRows) => {
  remoteData.value.params = formatSearchForm()
  if (clearRows) remoteData.value.clearRows = clearRows
  remoteData.value.clearSelected = true
  if (done) done()
}
const beforeClose = () => {
  if (DictDataCfg.value) DictDataCfg.value.onReset()
  modalVisible.value = false
}
const submitForm = mDone => {
  DictDataCfg.value.validate((form, done) => {
    const API = form.id ? putAPI : postAPI
    API('/config/api/cfgDictData', form, () => {
      setDictData(form.dictTypeCode, [])
      startSearch()
      done()
      mDone && mDone()
    }, () => {
      done()
      mDone && mDone(false)
    })
  }, () => mDone && mDone(false))
}
onMounted(startSearch)
</script>